<template>
  <div id="app">
    <header class="navbar navbar-expand-lg navbar-dark bg-dark" id="header">
    <div class="container"  >
<!--        <a id="logo-1" class="navbar-brand text-truncate" href="index.html">-->
<!--            <img class="my-photo" data-src="static/img/cxy965-bai.png" class="logo-2" alt="程序员工具导航">-->
<!--        </a>-->
        <a ref="logo" class="navbar-brand text-truncate" href="https://blog.csdn.net/Learning_xzj?type=blog" target="_blank" @mouseover="showHoveLog(true)" @mouseleave="showHoveLog(false)">
    <font color="#ff7f50" size="5px" > 浪潮之巅</font>
  </a>

        <div class="d-none d-lg-block" >
            <span id="hover-logo" v-show="isshow">
                <div class="menu-logo-hover">拖我到书签栏 收藏网站</div>
                <img class="menu-logo-img my-photo" src="/static/img/jiantou-ed6a2271.png" alt="CXY965">
            </span>
        </div>


        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav" aria-controls="navbar_collapse" aria-expanded="false" aria-label="展开菜单"><span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav mr-auto">
                <li class="dropdown"><a href="index.html" class="nav-link demo1">首页<span class="caret"></span></a>
                </li>

                <li class="dropdown"><a href="tool.html" class="nav-link demo1">程序员工具集<span class="caret"></span></a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link"  href="javascript:void(0)" onclick="addfavorite('程序员工具集',location.href)">收藏本站</a>
                </li>
            </ul>
        </div>
    </div>
</header>

      <div class="content">
        <component :is="currentComponent" />
      </div> 
  </div> 
  
</template>

<script>
import Chat from './components/Chat.vue'

export default {
  name: 'app',
  components: {
    Chat
  },
   methods: {
    showHoveLog(status) {
      this.isshow = status
    },
   },
  data() {
    return {
      currentComponent: 'chat',
      isshow: false
    }
  },
  mounted() {
     // 加载依赖的JS
    const head = document.querySelector('head');
       const bootstrapCSS = document.createElement('link');
    bootstrapCSS.rel = 'stylesheet';
    bootstrapCSS.href = '/static/css/bootstrap-ebd2144dac.css';
    head.appendChild(bootstrapCSS);

    const indexCSS = document.createElement('link');
    indexCSS.rel = 'stylesheet';
    indexCSS.href = '/static/css/index-9dc8ed86da.css';
    head.appendChild(indexCSS);

    const commonCSS = document.createElement('link');
    commonCSS.rel = 'stylesheet';
    commonCSS.href = '/static/css/common-fa2703bf79.css';
    head.appendChild(commonCSS);
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  border: 0;
  // background: black;
}
::-webkit-scrollbar {
  /* 滚动条整体样式 */
  width: 6px;
  height: 6px;
  /* 宽高对应横竖滚动条的尺寸 */
  background: rgb(235, 238, 245);
  border-radius: 10px;
  // -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  /* 滚动条里的小方块 */
  border-radius: 3px;
  background: #0780ed;
  height: 120px;
}
::-webkit-scrollbar-track {
  /* 滚动条里面的轨道 */
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
  /* background-color: #343541; */
  /* height: 1000px; */
  // background-color: #161622;
  // height: 100vh;
}


//导航栏样式
.content{
  position: relative;
  margin-top: 0px;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  flex-direction: row; /* 将排列方向改为水平方向 */
  text-align: center;
  line-height: 50px; /* 与导航栏高度相同 */
}

nav li {
  margin: 0 10px;
  position: relative;
  display: inline-block;
}

nav li a {
  display: block;
  color: white;
  
  text-decoration: none;
  transition: all 0.3s;
  font-size: 18px;
  text-decoration: none;
}

nav li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0780ed;
  transform: scaleX(0);
  transition: all 0.3s;
}

nav li a:hover::before {
  transform: scaleX(1);
}

nav li a:hover {
  transform: scale(1.2);
}


</style>
